import * as THREE from "three";
import imgYouzi from "./imgs/youzi.png";
import runPoints from "./points";
import { OrbitControls } from "./orbitControls";
import runQiu from "./qiu";

console.log(imgYouzi);
//创建场景.
let scene = new THREE.Scene();

//相机
let camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
//渲染器
let renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
//设置画布大小
renderer.setSize(window.innerWidth, window.innerHeight);

//加入到body
document.body.appendChild(renderer.domElement);

// event
const ray = new THREE.Raycaster();
renderer.domElement.addEventListener("click", (e) => {
  const { clientX, clientY } = e;
  let mouse: { x: number; y: number } = { x: 0, y: 0 };
  mouse.x = (clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(clientY / window.innerHeight) * 2 + 1;
  console.log(e.clientX, e.clientY, mouse);
  ray.setFromCamera(mouse, camera);

  let intersections: THREE.Intersection[] = ray.intersectObjects(
    scene.children
  );
  if (intersections.length) {
    let first = intersections[0];
    console.log(first.uv, first.object.name);
  }
});



{
  // controls

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.listenToKeyEvents(window); // optional

  //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

  controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
  controls.dampingFactor = 0.05;

  controls.screenSpacePanning = false;

  controls.minDistance = 100;
  controls.maxDistance = 500;

  controls.maxPolarAngle = Math.PI / 2;
}

let map: THREE.Texture;

// const img = new Image();
// img.src = imgYouzi;
// document.body.appendChild(img);
// const map = new THREE.Texture(img);
// map.wrapS = THREE.RepeatWrapping;
// map.wrapT = THREE.RepeatWrapping;
// map.image = img;

map = new THREE.TextureLoader().load(imgYouzi);
let img = new THREE.ImageLoader().load(imgYouzi);
document.body.appendChild(img);
// scene.background = map;

//第二步,创建几何体.

//加入到场景

let material = new THREE.MeshPhongMaterial({
  color: 0x808080,
  dithering: true,
});

let geometry = new THREE.PlaneGeometry(2000, 2000);

let mesh = new THREE.Mesh(geometry, material);
mesh.name = "plane";
mesh.position.set(0, -1, -1000);
mesh.rotation.x = -Math.PI * 0.5;
mesh.receiveShadow = true;
scene.add(mesh);

//设置相机位置
camera.position.x = 0;
camera.position.y = 100;
camera.position.z = -50;

runPoints(scene);
runQiu(scene);

let a = 0.01;

camera.position.set(20, 0, 40); //设置相机位置
camera.lookAt(new THREE.Vector3(0, 0, 0));
//渲染循环
function animate() {
  requestAnimationFrame(animate);
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  //   camera.position.x += 0.1;
  //   camera.position.y += 0.1;
  // // a += 0.0001;
  // // camera.rotateZ(a);
  // camera.rotation.z = 2;
  // moveSprite();
  renderer.render(scene, camera);
}
animate();
